import Sact from "sact";

import message from "./message.js";
import timeline from "./timeline.js";
import filemessage from "./fileMessage.js"
let template = `
<div class="chatTextBox">
    <div class="chatOtherMsg">
        <i s-if="show.load" class="weui-loading"></i>
        <span s-if="!show.load && !props.hasDone" class="chatFoucs" @click="loadMore">加载更多消息</span>
    </div> 
    <div s-for="m in props.messageList">
        <timeline s-if="m.isTimeLine" :time="m.time"></timeline>
        <message s-if="!m.isTimeLine && !m.hasfile" :me="props._cid === m.from" :message="m"></message>
        <filemessage s-if="m.hasfile" :me="props._cid === m.from" :message="m"></filemessage>
    </div>
</div>
`
export default Sact.component({
    name:"msglist",
    template,
    component: {
        message,timeline,filemessage
    },
    data(){
        return {
            show:{
                load:false,
            }
        }
    },
    method:{
        loadMore(){
            this.data.show.load = true;
            let lm = this.props.loadMore;
            lm && lm(()=>{this.data.show.load = false});
        },
        toEnd(){
            setTimeout(() => {
                this.$ele.scrollTop = this.$ele.scrollHeight;
            }, 100);
        },
    },
    props: ["ref","messageList","loadMore","_cid"],
    shouldUpdate(){
        if(this.ifNum !== this.props.messageList.length){
            if(this.ifNum + 1 === this.props.messageList.length){
                this.toEnd();
            }
            this.ifNum = this.props.messageList.length;
            return true;
        }
        else{
            return false;
        }
    },
    mounted() {
        this.props.ref(this);
        this.toEnd();
        this.ifNum = this.props.messageList.length;
    },  
})